import React, { Component } from 'react'
import {connect} from "react-redux"
import {bindActionCreators} from "redux"
import * as action from "../action/index.js"
 class Detail extends Component {
  state = {
      detaildata:{}
  }
  componentDidMount(){
      if (this.props.history.location.state) {
        this.setState({
            detaildata:this.props.history.location.state.item
        })
      } 
     
  }
  addshop(item){ // 加入购物车得方法
     this.props.addShop(item)
  }
  render() {
    let {detaildata} = this.state

    return (
      <div>
          {
              detaildata?<div>
                  <h4>{detaildata.title}</h4>
                  <img src={detaildata.img} alt="" />
                  <span>价格：{detaildata.price}</span>
                  <button onClick={this.addshop.bind(this,detaildata)}>加入购物车</button>
              </div>:"暂无数据"
          }
      </div>
    )
  }
}
let mapStateToProps = (state)=>{
    return {
        ...state.shopReducer
    }
}
let mapDispatchToprops = (dispatch)=>bindActionCreators(action,dispatch)
export default connect(mapStateToProps,mapDispatchToprops)(Detail)
